<template>
  <div id="formRender">
    <form id="generatedForm">
      <drag-control
        v-for="(obj, index) in list"
        :key="index"
        :item="obj"
        :class="['definedForm', obj.type == 'div' ? 'spliter-' + obj.cx : '']"
      >
        <template #item="childrenSlot">
          <!-- <span>{{ childrenSlot.item }}</span> -->
          <drag-control :key="index" :item="childrenSlot.item" class="definedForm" />
        </template>
      </drag-control>
    </form>
  </div>
</template>

<script>
import DragControl from "./controls/DragControl.vue";
export default {
  components: {
    DragControl,
  },
  name: "FormRender",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let formx = localStorage.getItem("formx");
      let json = JSON.parse(formx);
      for (var item in json) {
        this.list.push(json[item]);
      }
      // this.list = json;
      console.log(this.list);
    },
    getFormData() {
      let form = document.querySelector("#generatedForm");
      return new FormData(form);
    },
    getSourceJson() {
      return this.list;
    },
    getForm() {
      return document.querySelector("#generatedForm");
    },
  },
};
</script>

<style>
@import "@/assets/style/smart-green.css";
@import "@/assets/style/base.css";
@import "@/assets/style/title.css";
.icon-color {
  font-size: 50px !important;
  color: yellow;
}
</style>
